import AppBar from "@/components/layouts/AppBar";
import Layout from "@/components/layouts/Layout";
import LineDivider from "@/components/elements/LineDivider";
import WithAuth from "@/components/auth/WithAuth";
import { useEffect, useState } from "react";
import apiOdoo from "@/core/utils/apiOdoo";
import { useRouter } from "next/router";
import { useAuth } from "@/core/utils/auth";
import VariantCard from "@/components/variants/VariantCard";
import currencyFormat from "@/core/utils/currencyFormat";
import Disclosure from "@/components/elements/Disclosure";
import DescriptionRow from "@/components/elements/DescriptionRow";
import { SkeletonList } from "@/components/elements/Skeleton";

export default function DetailInvoice() {
  const router = useRouter();
  const { id } = router.query;
  const [ auth ] = useAuth();
  const [ invoice, setInvoice ] = useState(null);

  useEffect(() => {
    if (auth && id) {
      const loadInvoice = async () => {
        const dataInvoice = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/invoice/${id}`);
        setInvoice(dataInvoice);
      }
      loadInvoice();
    }
  }, [ auth, id ]);

  const Customer = () => {
    const customer = invoice?.customer;
    const fullAddress = [];
    if (customer?.street) fullAddress.push(customer.street);
    if (customer?.sub_district?.name) fullAddress.push(customer.sub_district.name);
    if (customer?.district?.name) fullAddress.push(customer.district.name);
    if (customer?.city?.name) fullAddress.push(customer.city.name);

    return (
      <div className="p-4 pt-0 flex flex-col gap-y-4">
        <DescriptionRow label="Nama">{ invoice?.customer?.name }</DescriptionRow>
        <DescriptionRow label="Email">{ invoice?.customer?.email || '-' }</DescriptionRow>
        <DescriptionRow label="No Telepon">{ invoice?.customer?.mobile || '-' }</DescriptionRow>
        <DescriptionRow label="Alamat">{ fullAddress.join(', ') }</DescriptionRow>
      </div>
    );
  };

  const downloadTaxInvoice = () => {
    window.open(`${process.env.ODOO_HOST}/api/v1/download/tax-invoice/${invoice.id}/${invoice.token}`, 'Download')
  }
  
  const downloadInvoice = () => {
    window.open(`${process.env.ODOO_HOST}/api/v1/download/invoice/${invoice.id}/${invoice.token}`, 'Download')
  }

  return (
    <WithAuth>
      <Layout className="pb-4">
        <AppBar title="Detail Invoice" />
        
        { invoice ? (
          <>
            <div className="p-4 flex flex-col gap-y-4">
              <DescriptionRow label="No Invoice">
                { invoice?.name }
              </DescriptionRow>
              <DescriptionRow label="Status Transaksi">
                { invoice?.amount_residual > 0 ? (
                  <span className="badge-solid-red">Belum Lunas</span>
                  ) : (
                  <span className="badge-solid-green">Lunas</span>
                ) }
              </DescriptionRow>
              <DescriptionRow label="Purchase Order">
                { invoice?.purchase_order_name || '-' }
              </DescriptionRow>
              <DescriptionRow label="Ketentuan Pembayaran">
                { invoice?.payment_term }
              </DescriptionRow>
              { invoice?.amount_residual > 0 && invoice.invoice_date != invoice.invoice_date_due && (
                <DescriptionRow label="Tanggal Jatuh Tempo">
                  { invoice?.invoice_date_due }
                </DescriptionRow>
              ) }
              <DescriptionRow label="Nama Sales">
                { invoice?.sales }
              </DescriptionRow>
              <DescriptionRow label="Tanggal Invoice">
                { invoice?.invoice_date }
              </DescriptionRow>
              <div className="flex items-center">
                <p className="text-gray_r-11 leading-none">Faktur Pembelian</p>
                <button 
                  type="button"
                  className="btn-light py-1.5 px-3 ml-auto"
                  onClick={downloadInvoice}
                >
                  Download
                </button>
              </div>
              <div className="flex items-center">
                <p className="text-gray_r-11 leading-none">Faktur Pajak</p>
                <button 
                  type="button"
                  className="btn-light py-1.5 px-3 ml-auto"
                  onClick={downloadTaxInvoice}
                  disabled={invoice.efaktur ? false : true}
                >
                  Download
                </button>
              </div>
            </div>

            <LineDivider />

            <Disclosure 
              label="Detail Penagihan"
            />

            <Customer />

            <LineDivider />

            <Disclosure 
              label="Detail Produk"
            />

            <div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
              { invoice?.products?.map((product, index) => (
                <VariantCard
                  key={index}
                  data={product}
                  buyMore
                />
              )) }
              <div className="flex justify-between mt-3 font-medium">
                <p className="text-gray_r-11">Total Belanja</p>
                <p>{ currencyFormat(invoice?.amount_total || 0) }</p>
              </div>
            </div>
          </>
        ) : (
          <div className="p-4 py-6">
            <SkeletonList number={12} />
          </div>
        ) }
      </Layout>
    </WithAuth>
  );
}